<template>
	<view class="message-container" style="padding-bottom: 90px;">
		<!-- 头部区域 -->
		<headerSlot :propsColor="'#fff'">
			<template v-slot:header>
				<view class="header-content">
					<view class="header-left">
						<view class="logo-container">
							<image :src="config.commonUrl + '/logo-orange.png'" mode="aspectFit"></image>
						</view>
					</view>
					<view class="header-center">
						<text class="page-title">消息中心</text>
					</view>
					<view class="header-right">
						<view class="header-actions">
							<text class="action-text">私信列表</text>
						</view>
					</view>
				</view>
			</template>
		</headerSlot>

		<!-- 互动消息区域 -->
		<view class="interaction-section">
			<view class="interaction-header">
				<view class="interaction-left" @click="goPage()">
					<view class="interaction-badge">
						<text class="badge-text">互动消息</text>
					</view>
					<view class="unread-badge" v-if="count>0">
						<text class="unread-count">{{count>99?'99+':count}}</text>
					</view>
				</view>
				<view class="interaction-right" @click="read">
					<text class="read-all-text">标为已读</text>
				</view>
			</view>
		</view>

		<!-- 消息列表 -->
		<view class="message-list">
			<view class="message-item" :class="{'pinned': item.top, 'move-cur': modalName=='move-box-'+ index}"
				v-for="(item,index) in users" :key="index" @touchstart="ListTouchStart" @touchmove="ListTouchMove"
				@touchend="ListTouchEnd" :data-target="'move-box-' + index">
				<!-- 消息内容 -->
				<view class="message-content" @click="connect(item)">
					<view class="avatar-section">
						<view class="avatar-container">
							<image :src="item.avatar||config.commonUrl + '/avt.png'" mode="aspectFill"></image>
							<view class="online-indicator" v-if="item.online"></view>
						</view>
						<view class="pin-indicator" v-if="item.top">
							<text class="pin-icon">📌</text>
						</view>
					</view>

					<view class="message-info">
						<view class="message-header">
							<text class="user-name">{{ item.nickname }}</text>
							<text class="message-time">{{ formatDate(item.lastMessageTime) }}</text>
						</view>
						<view class="message-preview">
							<text class="preview-text" v-if="item.msgType === 'image'">[图片]</text>
							<text class="preview-text" v-else>{{ item.lastMessage }}</text>
						</view>
					</view>

					<view class="message-actions">
						<view class="unread-count-badge" v-if="item.unreadCount">
							<text class="count-text">{{item.unreadCount}}</text>
						</view>
					</view>
				</view>

				<!-- 滑动操作 -->
				<view class="swipe-actions">
					<view class="action-btn pin-btn" @click="topMsg(item)">
						<text class="action-text">{{item.top?'取消置顶':'置顶'}}</text>
					</view>
					<view class="action-btn delete-btn" @click="deleteMsg(item.userId)">
						<text class="action-text">删除</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view class="empty-state" v-if="users.length === 0">
			<view class="empty-icon">💬</view>
			<text class="empty-text">暂无消息</text>
			<text class="empty-desc">开始与邻居交流吧</text>
		</view>

		<TabBar :PageCur="'msg'" />
	</view>
</template>

<script>
	import headerSlot from '@/components/header-slot.vue';
	import TabBar from '@/components/tabBar.vue';
	import config from '@/config/config';
	import {
		readAll
	} from "@/api/members.js";
	import {
		chatList,
		topChat,
		deleteChat
	} from '@/api/chat'
	import {
		mapState
	} from 'vuex'

	export default {
		components: {
			headerSlot,
			TabBar
		},
		data() {
			return {
				config,
				modalName: null,
				listTouchStart: 0,
				listTouchDirection: null,
				options: [{
					text: '取消',
					style: {
						backgroundColor: '#007aff'
					}
				}, {
					text: '确认',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				users: []
			};
		},
		onShow() {
			this.initMsgList()
		},
		methods: {
			initMsgList() {
				chatList().then(res => {
					if (res.data.code === 200) {
						this.users = res.data.data
					} else {
						uni.showModal({ //消息提示框
							content: '获取聊天列表失败', //错误信息
							showCancel: false
						});
					}
				})
			},
			read() {
				if (this.count) {
					readAll().then(res => {
						this.$store.commit('SETCOUNT', [])
					})
				}
			},
			topMsg(item) {
				topChat({
					userId: item.userId,
					top: !item.top
				}).then(res => {
					if (res.data.code === 200) {
						this.initMsgList()
					}
				})
			},
			deleteMsg(userId) {
				deleteChat(userId).then(res => {
					if (res.data.code === 200) {
						this.initMsgList()
					}
				})
			},
			goPage() {
				// this.read()
				this.$router.smartNavigate({
					url: '/pages/messagePages/interactionMsg'
				})
			},
			closePage() {
				uni.navigateBack()
			},
			onClick(e) {
				console.log('点击了' + (e.position === 'left' ? '左侧' : '右侧') + e.content.text + '按钮')
			},
			swipeChange(e, index) {
				console.log('当前状态：' + e + '，下标：' + index)
			},
			connect(item) {
				this.$router.smartNavigate({
					url: `/pages/homePages/messageInfo?name=${item.nickname}&avatar=${item.avatar}&userId=${item.userId}`
				})
			},
			// ListTouch触摸开始，获取触摸点距盒子左侧的距离
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},
			// ListTouch计算方向，
			ListTouchMove(e) {
				const currentX = e.touches[0].pageX
				const startX = this.listTouchStart
				const diff = startX - currentX

				// 向左滑动超过20px时显示操作按钮
				if (diff > 20) {
					this.listTouchDirection = 'left'
				} else if (diff < -20) {
					this.listTouchDirection = 'right'
				}
			},
			// ListTouch计算滚动
			ListTouchEnd(e) {
				const currentX = e.changedTouches[0].pageX
				const startX = this.listTouchStart
				const diff = startX - currentX

				console.log('滑动距离:', diff, '方向:', this.listTouchDirection)

				if (this.listTouchDirection === 'left' && diff > 30) {
					// 向左滑动超过30px，显示操作按钮
					this.modalName = e.currentTarget.dataset.target
					console.log('显示操作按钮:', this.modalName)
				} else if (this.listTouchDirection === 'right' || diff < 30) {
					// 向右滑动或滑动距离不够，隐藏操作按钮
					this.modalName = null
					console.log('隐藏操作按钮')
				}

				this.listTouchDirection = null
			},

			formatDate(dateString) {
				if (!dateString) return ''

				const date = new Date(dateString)
				const now = new Date()
				const diff = Math.floor((now - date) / 1000) // 秒差

				// 1分钟内
				if (diff < 60) return '刚刚'

				// 1小时内
				if (diff < 3600) return `${Math.floor(diff / 60)}分钟前`

				// 今天内
				if (date.toDateString() === now.toDateString()) {
					return `${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`
				}

				// 今年内
				if (date.getFullYear() === now.getFullYear()) {
					return `${date.getMonth() + 1}月${date.getDate()}日`
				}

				// 其他
				return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
			}
		},
		watch: {
			chatUnreadCount: {
				handler(newValue, oldValue) {
					this.initMsgList()
				},
			}
		},
		computed: {
			...mapState(['chatUnreadCount', 'count'])
		}
	}
</script>

<style lang="scss" scoped>
	.message-container {
		background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
		min-height: 100vh;
	}

	// 头部样式
	.header-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		width: 100%;

		.header-left {
			.logo-container {
				width: 176rpx;
				height: 48rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.header-center {
			flex: 1;
			text-align: center;

			.page-title {
				font-size: 36rpx;
				font-weight: 700;
				color: #333;
			}
		}

		.header-right {
			.header-actions {
				.action-text {
					font-size: 26rpx;
					color: #666;
					background: rgba(255, 255, 255, 0.8);
					padding: 8rpx 16rpx;
					border-radius: 20rpx;
				}
			}
		}
	}

	// 互动消息区域
	.interaction-section {
		margin: 24rpx;

		.interaction-header {
			background: white;
			border-radius: 20rpx;
			padding: 24rpx 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);

			.interaction-left {
				display: flex;
				align-items: center;
				position: relative;

				.interaction-badge {
					background: linear-gradient(135deg, #FF6B35 0%, #FE6100 100%);
					padding: 12rpx 20rpx;
					border-radius: 12rpx;
					box-shadow: 0 4rpx 12rpx rgba(254, 97, 0, 0.3);

					.badge-text {
						color: white;
						font-size: 28rpx;
						font-weight: 600;
					}
				}

				.unread-badge {
					position: absolute;
					top: -8rpx;
					right: -8rpx;
					background: #FF4D4F;
					border-radius: 50%;
					min-width: 32rpx;
					height: 32rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 2rpx solid white;
					box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.4);

					.unread-count {
						color: white;
						font-size: 20rpx;
						font-weight: 700;
					}
				}
			}

			.interaction-right {
				.read-all-text {
					color: #666;
					font-size: 28rpx;
					padding: 8rpx 16rpx;
					border-radius: 16rpx;
					background: #f5f5f5;
					transition: all 0.3s ease;

					&:active {
						background: #e9ecef;
						transform: scale(0.95);
					}
				}
			}
		}
	}

	// 消息列表
	.message-list {
		margin: 0 24rpx;
		overflow: hidden;

		.message-item {
			background: white;
			border-radius: 20rpx;
			margin-bottom: 16rpx;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
			transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
			position: relative;
			transform: translateX(0);

			&.pinned {
				border-left: 6rpx solid #FF6B35;
				background: linear-gradient(135deg, #fff 0%, #fff8f6 100%);
			}

			&.move-cur {
				transform: translateX(-160rpx);
			}

			&:active {
				transform: translateY(-2rpx);
				box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
			}

			.message-content {
				display: flex;
				align-items: center;
				padding: 24rpx;
				position: relative;
				background: white;
				z-index: 1;
				border-radius: 20rpx;
				overflow: hidden;

				.avatar-section {
					position: relative;
					margin-right: 20rpx;

					.avatar-container {
						position: relative;
						width: 88rpx;
						height: 88rpx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
							border: 3rpx solid #f0f0f0;
						}

						.online-indicator {
							position: absolute;
							bottom: 4rpx;
							right: 4rpx;
							width: 20rpx;
							height: 20rpx;
							background: #52c41a;
							border-radius: 50%;
							border: 3rpx solid white;
						}
					}

					.pin-indicator {
						position: absolute;
						top: -8rpx;
						right: -8rpx;

						.pin-icon {
							font-size: 20rpx;
							background: #FF6B35;
							color: white;
							padding: 4rpx 6rpx;
							border-radius: 8rpx;
						}
					}
				}

				.message-info {
					flex: 1;

					.message-header {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 8rpx;

						.user-name {
							font-size: 32rpx;
							font-weight: 600;
							color: #333;
						}

						.message-time {
							font-size: 24rpx;
							color: #999;
						}
					}

					.message-preview {
						.preview-text {
							font-size: 28rpx;
							color: #666;
							line-height: 1.4;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}

				.message-actions {
					margin-left: 16rpx;

					.unread-count-badge {
						background: #FF4D4F;
						border-radius: 50%;
						min-width: 36rpx;
						height: 36rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.3);

						.count-text {
							color: white;
							font-size: 22rpx;
							font-weight: 700;
						}
					}
				}
			}

			.swipe-actions {
				position: absolute;
				right: -160rpx;
				top: 0;
				height: 100%;
				display: flex;
				align-items: stretch;
				width: 160rpx;
				z-index: 10;
				border-radius: 0 20rpx 20rpx 0;

				.action-btn {
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 0 24rpx;
					transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
					flex: 1;
					position: relative;
					overflow: hidden;

					&::before {
						content: '';
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
						transform: translateX(-100%);
						transition: transform 0.6s ease;
					}

					&:active::before {
						transform: translateX(100%);
					}

					&.pin-btn {
						background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
						box-shadow: 0 4rpx 16rpx rgba(24, 144, 255, 0.3);
					}

					&.delete-btn {
						background: linear-gradient(135deg, #ff4d4f 0%, #cf1322 100%);
						box-shadow: 0 4rpx 16rpx rgba(255, 77, 79, 0.3);
					}

					.action-text {
						color: white;
						font-size: 26rpx;
						font-weight: 600;
						position: relative;
						z-index: 1;
					}

					&:active {
						transform: scale(0.95);
					}
				}
			}
		}
	}

	// 空状态
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 120rpx 32rpx;

		.empty-icon {
			font-size: 120rpx;
			margin-bottom: 32rpx;
			opacity: 0.6;
		}

		.empty-text {
			font-size: 36rpx;
			color: #666;
			font-weight: 600;
			margin-bottom: 16rpx;
		}

		.empty-desc {
			font-size: 28rpx;
			color: #999;
		}
	}

	// 兼容旧样式
	.header_slot {
		padding: 0 32rpx;
		width: 100%;
		font-weight: 500;
		font-size: 36rpx;
		color: #2C2622;
	}

	.index_top_image {
		width: 176rpx;
		height: 48rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.cu-list.menu-avatar>.cu-item {
		background-color: #f5f5f5;
	}

	.cu-list.menu-avatar>.cu-item .content {
		position: relative;
		left: 0;
	}

	.list-item {
		display: flex;
		padding: 32rpx;
		border-bottom: 1px solid #ccced3;

		.avatar {
			width: 90rpx;
			height: 90rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
			position: relative;

			.round {
				position: absolute;
				width: 14rpx;
				height: 14rpx;
				border-radius: 50%;
				background: #ef5656;
				top: -4rpx;
				right: -4rpx;
				z-index: 1;
			}

			image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}

		.content {
			flex: 1;

			.title {
				display: flex;
				justify-content: space-between;

				.name {
					font-weight: bold;
				}

				.time {
					color: #999;
					font-size: 24rpx;
				}
			}

			.txt {
				margin-top: 10rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				text-align: left;
				color: #999;
				font-size: 26rpx;
			}
		}
	}

	.interaction_msg {
		padding: 32rpx;
		background-color: #fff;

		.interaction_msg_label {
			background-color: red;
			color: #fff;
			padding: 6rpx 10rpx;
			border-radius: 8rpx;
		}

		.interaction_msg_tip {
			font-size: 24rpx;
			font-weight: 700;
			min-width: 32rpx;
			height: 32rpx;
			color: red;
			// background-color: red;
			padding: 6rpx;
			border-radius: 50%;
		}
	}
</style>